<template>
  <div style="font-family: '微软雅黑'">
    <!-- {{ $route.params.salonid }} - {{ $route.query.scode }} -->
    <pre
      style="
        margin: 0;
        width: 100%;
        height: 20px;
        background-color: #d14649;
        font-family: '微软雅黑';
        font-size: small;
        line-height: 20px;
        color: #fff;
      "
    >  个人主页</pre>

    <!-- <p style="font-size: 30px; margin-top: 10px;margin-bottom: 10px;text-align: center;color:#409EFF;">
    </p> -->
    <div style="color:#409EFF;text-align: center;margin-bottom: 10px;">
      <el-link
        :href="'/customreport/m' + clerkObj.id + '.pdf'"
        target="_blank"
        type="primary"
        style="font-size: 20px;font-weight: bold;"
      >{{ clerkObj.cname }}</el-link>
    </div>
    <div style="font-size: 16px;text-align: center;margin-bottom: 10px;">
      <van-row>
        <van-col span="16">{{ clerkObj.ccode }}</van-col>
        <van-col span="8">{{ clerkObj.sex===0?'男':'女' }}</van-col>
      </van-row>
    </div>
    <van-divider>商机</van-divider>
    <van-row class="m-v-c-add">
      <van-col span="20">
        <van-field v-model="tag1" placeholder="新的商机" />
      </van-col>
      <van-col span="4">
        <van-button type="primary" @click="handleTags(1)">新增</van-button>
      </van-col>
    </van-row>
    <div class="m-tags" style="color:#67c23a;background-color: #f0f9eb;">{{ clerkObj.tagsj }}</div>
    <van-divider>客情</van-divider>
    <van-row class="m-v-c-add">
      <van-col span="20">
        <van-field v-model="tag2" placeholder="新的客情" />
      </van-col>
      <van-col span="4">
        <van-button type="info" @click="handleTags(2)">新增</van-button>
      </van-col>
    </van-row>
    <div class="m-tags" style="color:#409eff;background-color: #ecf5ff;">{{ clerkObj.tagkq }}</div>
    <van-divider>其他</van-divider>
    <van-row class="m-v-c-add">
      <van-col span="20">
        <van-field v-model="tag3" placeholder="新的其他" />
      </van-col>
      <van-col span="4">
        <van-button type="warning" @click="handleTags(3)">新增</van-button>
      </van-col>
    </van-row>
    <div class="m-tags" style="color:#e6a23c;background-color: #fdf6ec;">{{ clerkObj.tagqt }}</div>

    <van-divider>跟踪</van-divider>
    <van-row class="m-v-c-add">
      <van-col span="20">
        <van-field v-model="tag4" placeholder="新的跟踪" />
      </van-col>
      <van-col span="4">
        <van-button @click="handleTags(4)">新增</van-button>
      </van-col>
    </van-row>
    <div class="m-tags" style="color:black;background-color: #fff;margin-bottom: 10px;" v-html="clerkObj.track" />

    <van-divider>消费记录</van-divider>
    <div class="m-tags" style="color:black;background-color: #fff;margin-bottom: 10px;" v-html="clerkObj.spend" />
    <van-form @submit="handleSpend">
      <van-cell title="选择日期" :value="value1" required @click="show = true" />
      <van-field
        v-model="value2"
        name="品项"
        label="品项"
        placeholder="品项"
        :rules="[{ required: true, message: '请填写品项' }]"
      />
      <van-field
        v-model="value3"
        name="成交价"
        label="成交价"
        placeholder="成交价"
        :rules="[{ required: true, message: '请填写成交价' }]"
      />
      <van-field
        v-model="value4"
        name="成交分析"
        label="成交分析"
        placeholder="成交分析"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" size="small">新增</van-button>
      </div>
    </van-form>
    <div style="height: 50px;" />
    <van-calendar v-model="show" :min-date="new Date(2023, 6, 1)" @confirm="onConfirm" />
    <!-- <div style="clear:both" /> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getClerk, updateSpend, updateTags } from '@/api/txs'
import dayjs from 'dayjs'

import Col from 'vant/lib/col'
import 'vant/lib/col/style'
import Row from 'vant/lib/row'
import 'vant/lib/row/style'
import Divider from 'vant/lib/divider'
import 'vant/lib/divider/style'
import Form from 'vant/lib/form'
import Field from 'vant/lib/field'
import 'vant/lib/form/style'
import 'vant/lib/field/style'
import Button from 'vant/lib/button'
import 'vant/lib/button/style'
import Cell from 'vant/lib/cell'
import 'vant/lib/cell/style'
import Calendar from 'vant/lib/calendar'
import 'vant/lib/calendar/style'
import Notify from 'vant/lib/notify'
import 'vant/lib/notify/style'

export default {
  components: {
    [Notify.name]: Notify,
    [Calendar.name]: Calendar,
    [Button.name]: Button,
    [Form.name]: Form,
    [Field.name]: Field,
    [Divider.name]: Divider,
    [Col.name]: Col,
    [Cell.name]: Cell,
    [Row.name]: Row
  },
  data () {
    return {
      tag1: '',
      tag2: '',
      tag3: '',
      tag4: '',
      show: false,
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      clerkObj: {
        ngz: '',
        ygz: '',
        rgz: '',
        sgz: '',
        nzz: '',
        yzz: '',
        rzz: '',
        szz: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getClerk(this.$route.params.clerkid)
        .then(res => {
          this.clerkObj = res.data.data
          loading.close()
        })
        .catch(() => {
          this.$alert('获取信息故障，请联系管理员！', '服务器错误', {
            type: 'error',
            confirmButtonText: '确定'
          })
        })
    },
    getTagType (tag) {
      if (tag) {
        const s = tag.charAt(1)
        if (s === '金') {
          return 'warning'
        }
        if (s === '木') {
          return 'success'
        }
        if (s === '水') {
          return ''
        }
        if (s === '火') {
          return 'danger'
        }
        if (s === '土') {
          return 'info'
        }
      }
    },
    onConfirm(date) {
      this.show = false
      this.value1 = this.formatDate(date)
      // console.log(this.value1);
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
    },
    handleTags(val) {
      let kq = ''
      let sj = ''
      let qt = ''
      let track = ''
      switch (val) {
        case 1:
          sj = this.tag1
          if (sj.length > 0) {
            this.clerkObj.tagsj = sj + '； ' + this.clerkObj.tagsj
          }
          break
        case 2:
          kq = this.tag2
          if (kq.length > 0) {
            this.clerkObj.tagkq = kq + '； ' + this.clerkObj.tagkq
          }
          break
        case 3:
          qt = this.tag3
          if (qt.length > 0) {
            this.clerkObj.tagqt = qt + '； ' + this.clerkObj.tagqt
          }
          break
        case 4:
          if (this.tag4.length > 0) {
            track = dayjs(new Date()).format('YY-MM-DD') + ' ' + this.name + '：' + this.tag4
            this.clerkObj.track = track + '<br>' + this.clerkObj.track
          }
          break
        default:
      }
      updateTags(this.clerkObj.id, kq, sj, qt, track).then(() => {
        Notify({ type: 'success', message: '新增成功' })
      })
    },
    handleSpend() {
      if (this.value1 === '' || this.value2 === '' || this.value3 === '') {
        this.$message.error('出错：需要填写相关信息！')
        return
      }
      const spend = dayjs(this.value1).format('YY-MM-DD') + ' / ' + this.value2 + ' / ' + this.value3 + ' / ' + this.value4
      if (this.clerkObj.spend && this.clerkObj.spend.length > 0) {
        this.clerkObj.spend = spend + '<br>' + this.clerkObj.spend
      } else {
        this.clerkObj.spend = spend
      }

      updateSpend(this.clerkObj.id, spend).then(() => {
        Notify({ type: 'success', message: '新增成功' })
      })
    }
  }
}
</script>

<style lang="scss">
.m-v-c-add {
  .van-col--4 {
    margin-top: -22px;
  }
}
</style>

<style lang="scss" scoped>
.sheet-content {
  // margin-right: 30px;
  height: 60px;
  line-height: 30px;
  background-color: #f2f2f2;
  font-size: larger;
  font-weight: bold;
  padding: 20px;
  margin-bottom: 20px;
  .el-col {
    border:1px solid transparent;
  }
}
.m-tags {
  margin: 0 40px;
  width: 90%;
  font-size: 30px;
  padding: 20px 20px;
  align-content: center;
  border-radius: 15px
}
</style>
